<template>
  <div class="has-notice" id="has-notice">
    <a-tabs default-active-key="1" @change="callback" size="large">
      <a-tab-pane key="1" tab="我发布的公告" :style="{ fontSize: 22 + 'px' }">
      </a-tab-pane>
    </a-tabs>
    <div class="release-notice">发布公告</div>

    <div class="search-input">
      <a-input-search
        placeholder="请输入公告名称"
        enter-button="查询"
        size="large"
        style="height: 60px"
        @search="onSearch"
      />
    </div>

    <el-table
      ref="singleTable"
      :data="tableData"
      highlight-current-row
      :header-row-style="headerRoeStyle"
      :header-cell-style="{ background: '#E8E8E8' }"
      @current-change="handleCurrentChange"
      style="width: 100%; text-algin: center"
    >
      <el-table-column type="index" width="100" label="序号"> </el-table-column>
      <el-table-column property="date" label="公告标题"> </el-table-column>
      <el-table-column property="name" label="发布人"> </el-table-column>
      <el-table-column property="address" label="发布时间"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="80">
        <template #default="scope">
          <el-button
            @click.prevent="deleteRow(scope.$index, tableData)"
            type="text"
            size="small"
          >
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "公告标题公告标题公告标题公告标题",
          name: "王小虎",
          address: "2020-6-24  10:24",
        },
        {
          date: "公告标题公告标题公告标题公告标题",
          name: "王小虎",
          address: "2020-6-24  10:24",
        },
        {
          date: "公告标题公告标题公告标题公告标题",
          name: "王小虎",
          address: "2020-6-24  10:24",
        },
        {
          date: "公告标题公告标题公告标题公告标题",
          name: "王小虎",
          address: "2020-6-24  10:24",
        },
        {
          date: "公告标题公告标题公告标题公告标题",
          name: "王小虎",
          address: "2020-6-24  10:24",
        },
        {
          date: "公告标题公告标题公告标题公告标题",
          name: "王小虎",
          address: "2020-6-24  10:24",
        },
        {
          date: "公告标题公告标题公告标题公告标题",
          name: "王小虎",
          address: "2020-6-24  10:24",
        },
        {
          date: "公告标题公告标题公告标题公告标题",
          name: "王小虎",
          address: "2020-6-24  10:24",
        },
        {
          date: "公告标题公告标题公告标题公告标题",
          name: "王小虎",
          address: "2020-6-24  10:24",
        },
        {
          date: "公告标题公告标题公告标题公告标题",
          name: "王小虎",
          address: "2020-6-24  10:24",
        },
        {
          date: "公告标题公告标题公告标题公告标题",
          name: "王小虎",
          address: "2020-6-24  10:24",
        },
        {
          date: "公告标题公告标题公告标题公告标题",
          name: "王小虎",
          address: "2020-6-24  10:24",
        },
        {
          date: "公告标题公告标题公告标题公告标题",
          name: "王小虎",
          address: "2020-6-24  10:24",
        },
        {
          date: "公告标题公告标题公告标题公告标题",
          name: "王小虎",
          address: "2020-6-24  10:24",
        },
        {
          date: "公告标题公告标题公告标题公告标题",
          name: "王小虎",
          address: "2020-6-24  10:24",
        },
        {
          date: "公告标题公告标题公告标题公告标题",
          name: "王小虎",
          address: "2020-6-24  10:24",
        },
        {
          date: "公告标题公告标题公告标题公告标题",
          name: "王小虎",
          address: "2020-6-24  10:24",
        },
        {
          date: "公告标题公告标题公告标题公告标题",
          name: "王小虎",
          address: "2020-6-24  10:24",
        },
        {
          date: "公告标题公告标题公告标题公告标题",
          name: "王小虎",
          address: "2020-6-24  10:24",
        },
        {
          date: "公告标题公告标题公告标题公告标题",
          name: "王小虎",
          address: "2020-6-24  10:24",
        },
        {
          date: "公告标题公告标题公告标题公告标题",
          name: "王小虎",
          address: "2020-6-24  10:24",
        },
        {
          date: "公告标题公告标题公告标题公告标题",
          name: "王小虎",
          address: "2020-6-24  10:24",
        },
      ],
    };
  },
  watch: {
    $route: {
      handler() {
        // console.log(path);
        // console.log(matched);
        console.log(this.$route.meta.id);
      },
      immediate: true,
    },
  },
  mounted() {
    console.log(this.$route);
  },
  methods: {
    callback(key) {
      console.log(key);
    },
    headerRoeStyle() {
      return "background-color:#E8E8E8;color:#333333";
    },
    onSearch() {},
    handleCurrentChange() {},
  },
};
</script>
<style lang="less" scoped>
.has-notice {
  position: relative;
}
.release-notice {
  position: absolute;
  right: 20px;
  top: 5px;
  height: 36px;
  width: 100px;
  line-height: 36px;
  text-align: center;
  border-radius: 3px;
  font-size: 15px;
  color: #fff;
  background-color: #00796a;
  box-shadow: 1px 1px 5px 0px #00796a;
  cursor: pointer;
}
.search-input {
  padding: 31px 20% 31px 20%;
  margin-bottom: 50px;
  height: 60px;
}
</style>